<template>
    <div class="detail">
        <van-sticky>
            <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="goto" />
        </van-sticky>

        <div class="fca qux" v-if="detail.orderStatus === '00'">
            <div>
                <span class="cfff">订单已取消</span>
            </div>
            <div>
                <img style="width: 100px;" src="https://file.sdyxmall.com/h5/v1/public/app/img/cancel.ff91da7.png"
                    alt="">
            </div>
        </div>

        <div class="">
            <van-card v-for="item in detail.carts" :key="item.cartId" style="background-color: white;"
                :num="item.buyNum" :thumb="item.imgUrl">
                <template #price>
                    <span class="f16" style="color: #b91717;">￥{{ (item.price / 100).toFixed(2) }}</span>
                </template>
                <template #title>
                    <div class="f16">{{ item.masterName }}</div>
                </template>
            </van-card>
        </div>

        <div class="mt-10 bfff pa15 pt-10">
            <div class="fcb h24">
                <p class="f13 c797d82">商品金额</p>
                <p class="f13 c2e2f30">￥{{ (detail.totalMoney / 100).toFixed(2) }}</p>
            </div>
            <div class="fcb h24">
                <p class="f13 c797d82">运费</p>
                <p class="f13 c2e2f30">￥{{ (detail.expressFee / 100).toFixed(2) }}</p>
            </div>
            <div class="fcb h24">
                <p class="">实付</p>
                <p class="cc03131">￥{{ (detail.allFee / 100).toFixed(2) }}</p>
            </div>
        </div>
        <div class="mt-10 bfff pa15 pt-10">
            <div class="fcb">
                <div class="fc h24">
                    <p class="f11 c797d82">订单编号</p>
                    <p class="f11 c797d82 ml-10">{{ detail.orderId }}</p>
                </div>
                <van-button size="mini" type="default">复制</van-button>
            </div>
            <div class="fc h24">
                <p class="f11 c797d82">下单时间</p>
                <p class="f11 c797d82 ml-10">{{ formatTime(detail.createTime) }}</p>
            </div>
        </div>
        <div v-if="detail.orderStatus === '00'" class="foot fcb bfff fixed w100p bo0 h50 pl-15 pr-15">
            <div>订单状态: 已取消</div>
            <van-button size="small" type="default">重新购买</van-button>
        </div>
        <div v-else-if="detail.orderStatus === '01'" class="foot fcb bfff fixed w100p bo0 h50 pl-15 pr-15">
            <div>订单状态: 已支付</div>
            <van-button size="small" type="default" @click="postUpdate">取消订单</van-button>
        </div>
        <div v-else-if="detail.orderStatus === '02'" class="foot fcb bfff fixed w100p bo0 h50 pl-15 pr-15">
            <div class="fl">剩余支付时间：<van-count-down :time="time" format="mm 分 ss 秒" @finish="finish" /></div>
            <van-button size="small" type="default">去支付</van-button>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import request from '../../utils/request'
import { NavBar } from 'vant';
import { Sticky } from 'vant';
import { Card } from 'vant';
import { Button } from 'vant';
import { CountDown } from 'vant';

Vue.use(CountDown);
Vue.use(Button);
Vue.use(Card);
Vue.use(Sticky);
Vue.use(NavBar);

export default {
    data() {
        return {
            orderId: '',
            detail: [],
            orderStatus: '',
            time: '',
        }
    },
    created() {
        this.orderId = this.$route.params.id;;
        this.getDetail();
    },
    methods: {
    
        async getDetail() {
           
            let params = {
                orderId: this.orderId
            }
            await request.get('/order/detail', { params }).then(res => {
                this.detail = res.result;
                this.countdowned();
            })
        },
        goto() {
            
            this.$router.push({
                path: '/',
            })
        },
        formatTime(timeStamp) {
            const date = new Date(timeStamp);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            const seconds = date.getSeconds().toString().padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        countdowned() {
            if (this.detail.orderStatus == '02') {
                let fifteen = 15 * 60 * 1000;
                let endTime = this.detail.createTime + fifteen;
                console.log(endTime)
                let now = Date.now();
                if (now < endTime) {
                    let countTime = endTime - now;
                    this.time = countTime;
                }
            }
        },

    }
};
</script>

<style scoped>
.h24 {
    line-height: 24px;
}

.qux {
    height: 80px;
    background: url(https://file.sdyxmall.com/h5/v1/public/app/img/group5@2x.0b65469.png) 50% no-repeat;
}
</style>